<template>
	<view class="content">
		
		<!-- <slheader :ableexit="false" :ableback="true" title="店铺位置" style="z-index: 999;"></slheader>
		<map  style="width: 100%; height: 1500rpx;" show-location="true" :latitude="latitude" id="map" :longitude="longitude":markers="marker">
			<cover-view slot="callout">
				<block v-for="(item,index) in marker" :key="index">
					<cover-view class="customCallout" :marker-id="item.id">
						<cover-view class="content">
							{{item.id}} 内容
						</cover-view>
					</cover-view>
				</block>
			</cover-view>
		</map> -->
		
		
		<map :anchor="anchor" style="width: 100%; height: 1500rpx; margin: 0;" :layer-style='5' :show-location='true' :latitude="latitude"
			 :longitude="longitude" :markers="marker" :scale="scale" @markertap="toMap" @callouttap='callouttap'>
			
		</map>
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
                // 地图中心的坐标点
				latitude: 25.269528, //纬度
				longitude: 110.34022, //经度
				address:'导航目的地名字（气泡地点）',
				scale: 16, //缩放级别
				bottomData: false,
				anchor:{x: .5, y: 1} ,
				//可以定义多个坐标点
				marker: [{
						id: 11,
						latitude: 25.242754, //纬度
						longitude: 110.319972, //经度
						iconPath: '../../static/icon/make1.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '地址', //文本
							color: '#000', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							display: 'ALWAYS', //常显
						},
					},
					{
							id: 12,
							latitude: 25.241047, //纬度
							longitude: 110.326224, //经度
							iconPath: '../../static/icon/make2.png', //显示的图标        
							rotate: 0, // 旋转度数
							width: "是", //宽
							height:"是", //高
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: '地址', //文本
								color: 'red', //文字颜色
								fontSize: 14, //文本大小
								borderRadius: 15, //边框圆角
								borderWidth: '10',
								display: 'ALWAYS', //常显
								bgColor: '#ffffff'
							},
							customCallout:{
								width: "100", //宽
								height:"100", //高
								background: "#aaffff",
							}
						},
					
				],
				technicianlatitude:"",
				technicianlongitude:"",
				pageVO:{
					pageNo: 1,
					pageSize: 99,
					technicianId:"", 
					receiveStatus:2,//技师接单状态（1未接单，2已接单，3服务中，4已完成，5拒绝接单，6取消）
					sort:"asc",//排序
				},
			}
		},
		onLoad() {

		},
		computed: {
			//获取是否登录
			...mapState(['userInfo']) ,
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '90vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		mounted() {
			this.pageVO.technicianId=this.userInfo.id
			this.showPage(true)
		},
		onShow() {
			//获取当前位置
			
		},
		methods: {
			//获取数据
			showPage(type){
				this.pageVO.technicianId=this.userInfo.id
				this.request.getRequest(this.http.httpsLian.orderDispatchRecord,this.pageVO, type)
				.then(res => { 
					//console.log("sss："+JSON.stringify(res))
					if(res.code!=0 )return 
					this.marker=[]
					res.data.list.forEach((item,index)=>{
						console.log("sss："+item.orderNo+"："+JSON.stringify(item.latitude)+"："+item.longitude)
						this.marker.push({
							id: index,
							latitude: item.latitude, //纬度
							longitude: item.longitude, //经度
							iconPath: '../../static/icon/make2.png', //显示的图标        
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: '待服务点'+index, //文本
								color: '#e50000', //文字颜色
								fontSize: 14, //文本大小
								borderRadius: 15, //边框圆角
								borderWidth: '10',
								display: 'ALWAYS', //常显
							}
						})
						
					})
				}).catch(res => {
					uni.$u.toast("网络异常4")
				})
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			toMap(e) {
				console.log('地图标志物点击事件',JSON.stringify(e.detail))
				// uni.openLocation({
				// 	latitude: Number(this.latitude), //要去的纬度-地址
				// 	longitude: Number(this.longitude), //要去的经度-地址
				// 	address: this.address, //要去的具体地址

				// })
			},






		}
	}
</script>
<style lang="scss" scoped>
	.customCallout {
		box-sizing: border-box;
		background-color: #fff;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
		border-radius: 4rpx;
		display: inline-flex;
		padding: 6rpx 24rpx;
		justify-content: center;
		align-items: center;
		color: #2A7BE2;
	}
</style>